{{fragment "org.wso2.carbon.apimgt.auth.ui.authManager"}}
<header class="header header-default">
    <div class="container-fluid">
        <div class="pull-left brand float-remove-xs text-center-xs">
            <a href="{{@contextPath}}/apis" title="apiPublisherHomePage">
                {{fragment "wso2-logo" invert=true}}
                <!-- TODO: take this `wso2-logo` from common.foundation component fragment if possible ~tmkb-->
                <!--<h4 style="display: inline">{{!--appName--}}</h4>-->
            </a>
        </div>

        <ul class="nav navbar-right float-remove-xs text-center-xs">
            <li class="visible-inline-block">
                <a href="#" class="dropdown" data-toggle="dropdown" title="user">
					<span class="icon fw-stack fw-lg">
	                   <i class="fw fw-circle fw-stack-2x" title="user"></i>
	                   <i class="fw fw-user fw-stack-1x fw-inverse" title="user"></i>
	                </span>
                    <span class="hidden-xs">
							<span class="userNameContainer" id="userNameContainer"></span>
							 <span class="caret"></span>
					</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right float-remove-xs position-static-xs text-center-xs remove-margin-xs slideInDown"
                    role="menu">
                    <li class="dropdown-header visible-xs">
                        <span class="userNameContainer">admin</span>
                        <span class="caret"></span>
                    </li>
                    <li class="divider visible-xs"></li>
                    <li><a onclick="doLogout()" title="Logout" id="logoutLink">Logout</a></li>
                </ul>
            </li>
        </ul>

    </div>
    <script>document.getElementById('userNameContainer').textContent = (window.localStorage.getItem("user"));</script>
</header>

